<html>
<meta charset="utf-8">

<head>
    <title>后台二维码登陆</title>
</head>

<body>
<div id="content">
    <div class="backgroundImg"></div>
    <div class="glyphicon-qrcode" style="">
        <span style="display: inline-block;color: #999;margin: 10px 0">请使用微信扫描二维码登陆后台管理系统</span>
        <br>
        <img height="300" width="300" src="/sell/static/${qrUrl}" alt="这是一张二维码，请扫描二维码登陆" style="display: inline-block"/>
    </div>
</div>

<script>
    console.log('test');
    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket('ws://bread.s1.natapp.cc/sell/login/webSocket')
    } else {
        alert('该浏览器不支持!');
    }

    websocket.onopen = function (event) {
        console.log('建立连接');
    };

    websocket.onclose = function (event) {
        console.log('关闭连接');
    };

    websocket.onmessage = function (event) {
        console.log('收到消息:' + event.data);
        if (event.data == "") {
            //shiabai
        }

        else {
            //chenggong
            window.location.href = '/sell/stat/admin/list?page=1&size=2&openid=' + event.data;
            /* window.open('/sell/stat/admin/list?page=1&size=2&openid='+event.data);// 图片URL*/
            //setTimeout(window.location.redirect(), 1000);
        }

    };

    websocket.onerror = function (event) {
        alert('websocked通信发生错误');
    };

    window.onbeforeunload = function (event) {
        websocket.close();
    };
    url_index = function (url) {
        $.ajax({}, function () {
            //成功
        }, function () {
            // 失败
        })
    }
</script>
<style>
    #content {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center
    }

    .backgroundImg {
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('/sell/static/images/welcomeIndex.jpg');
        width: 100%;
        height: 100%;
        z-index: -50;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        /* -webkit-filter: blur(5px);
         -moz-filter: blur(5px);
         -ms-filter: blur(5px);
         filter: blur(5px);
         overflow: hidden;
         filter: blur(2px);*/
    }

    .glyphicon-qrcode {
        background: white;
        text-align: center;
        z-index: 50;
        position: fixed;
        top: 20%;
        left: 40%;
        padding: 20px;
        border-radius: 10px
    }
</style>
</body>

</html>